<script setup lang="ts">
import type {TableType} from "@/type/table-type.ts";
import type {PropType} from "vue";

defineProps({
  // 列表数据
  data: {
    type: Array,
    default: () => []
  },
  // 列数据
  columns: {
    type: Array as PropType<TableType[]>,
    default: () => []
  },
  // 字段映射
  treeProps: {
    type: Object as PropType<{ children: string, hasChildren: string }>,
    default: () => ({
      children: 'children',
      hasChildren: 'hasChildren'
    })
  },
  // 行id
  rowKey: {
    type: String,
    default: 'id'
  },
  loading: {
    type: Boolean,
    default: false
  },
  showOption: {
    type: Boolean,
    default: true,
  },
  optionWidth: {
    type: [String, Number],
    default: 'auto'
  }
})
</script>

<template>
<el-table :data="data"
          border
          :row-key="rowKey"
          v-loading="loading"
          :tree-props="treeProps">
  <el-table-column v-for="(item, index) in columns"
                   :key="index"
                   :label="item.label"
                   :prop="item.prop"
                   :width="item.width"
                   :align="item.align"
                   :header-align="item.headerAlign || item.align"
                   :visible="item.visible"
  >
    <template #default="scope">
      <!-- 列类型为tag时 -->
      <span v-if="item.type === 'tag' && scope.row[item.prop] !== null">
        <el-tag :type="item.tag.type  || item.tag.typeObj && item.tag.typeObj[scope.row[item.prop]]"
                :size="item.tag.size"
                :effect="item.tag.effect"
                :hit="item.tag.hit"
                disable-transitions
                :color="item.tag.color || item.tag.colorObj && item.tag.colorObj[scope.row[item.prop]]"
        >
          <span v-if="item.dict">{{item.dict[scope.row[item.prop]]}}</span>
          <span v-else>{{scope.row[item.prop]}}</span>
        </el-tag>
      </span>
      <el-link v-else-if="item.type === 'link'" :href="item.link.baseUrl + scope.row[item.link.prop]" :target="item.link.target">{{scope.row[item.prop]}}</el-link>
      <span v-else-if="item.type === 'dict'">{{item.dict[scope.row[item.prop]]}}</span>
      <span v-else>{{ scope.row[item.prop]}}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作" v-if="showOption" :width="optionWidth">
    <template #default="scope">
      <slot name="options"
            v-bind:row="scope.row"
            v-bind:column="scope.column"
            v-bind:$index="scope.$index"
      >
      </slot>
    </template>
  </el-table-column>
</el-table>
</template>

<style scoped>

</style>
